<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>关于我们</title>
    <link href="../css/AboutusStyle.css" rel="stylesheet" type="text/css"/>
    <link href="../css/aboutstyle.css" rel="stylesheet" type="text/css"/>
    <link href="../css/setfont.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div class="box">
    <!-- ======iframe导入头部导航nav==========-->
    <div id="nav">
        <iframe src="top.html" frameborder="0" width="100%" leftmargin="0"  topmargin="0" scrolling="no" height="100px"></iframe>
    </div>
    <!-- ==========关于我们=========-->
    <div class="aboutus">
        <div class="line"></div>
        <h4>关于我们</h4>
        <div class="line"></div>
        <div class="aboutus_info">
            <div class="left">
                <h5>公司简介</h5>
                <p id="now"></p>
                <p id="pre">欢迎来到Amiliy，深受千万用户信赖的口红推荐特卖网站。Amiliy由海归学子陈欧创立于2013年5月，致力于为化妆小白推荐最适合自己的“唇色诱惑”。在网站推荐口红系列，并以远低于市场价折扣限量出售。从创立伊始，Amiliy便坚持以用户体验为最高诉求，承诺“100%正品”“100%实拍”和“7天拆封无条件退货”政策，竭力为每个女孩带来独一无二的唇色诱惑。</p>
                <!--<a href="#">更多>></a>-->
            </div>
            <div class="right"><img src="../images/about2.png"/></div>
        </div>
    </div>
    <!-- ================时间轴===============-->
    <div class="time">
        <div class="content">
            <div class="wrapper">
                <div class="light"><i></i></div>
                <hr class="line-left">
                <hr class="line-right">
                <div class="main">
                    <h1 class="title">公司历程</h1>
                    <div class="year">
                        <h2><a href="#">2016年<i></i></a></h2>
                        <div class="list">
                            <ul>
                                <li class="cls highlight">
                                    <p class="date">3月26日</p>
                                    <p class="intro"  id="intro">正式推出唇色诱惑四个系列</p>
                                    <p class="version">&nbsp;</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="year">
                        <h2><a href="#">2015年<i></i></a></h2>
                        <div class="list">
                            <ul>
                                <li class="cls ">
                                    <p class="date">7月26日</p>
                                    <p class="intro"  id="intro1" >正式推出</p>
                                    <p class="version">&nbsp;</p>
                                </li>
                                <li class="cls ">
                                    <p class="date">8月9日</p>
                                    <p class="intro"  id="intro2">正式推出</p>
                                    <p class="version">&nbsp;</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="year">
                        <h2><a href="#">2014年<i></i></a></h2>
                        <div class="list">
                            <ul>
                                <li class="cls ">
                                    <p class="date">7月26日</p>
                                    <p class="intro"  id="intro3">Amily成立电商网站，为爱美的女孩打造专属美丽</p>
                                    <p class="version">&nbsp;</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="year">
                        <h2><a href="#">2013年<i></i></a></h2>
                        <div class="list">
                            <ul>
                                <li class="cls highlight">
                                    <p class="date">5月26日</p>
                                    <p class="intro"  id="intro4">Amiliy正式成立</p>
                                    <p class="version">&nbsp;</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--========产品==================-->
    <div class="aboutus_product">
        <div class="line"></div>
        <h4>特色产品</h4>
        <div class="line"></div>

        <span>选择我们  秀出你的唇色诱惑</span>
        <div class="feature_product" id="feature_product">
            <div class="feature_product1 " id="feature_product1">
                <img src="../images/pic110.png"/><br>
                <b>最青春</b>
                <p>活力诠释最青春</p>
            </div>
            <div class="feature_product1" id="feature_product2">
                <img src="../images/pic110.png"/><br>
                <b>最时髦</b>
                <p>活力诠释最青春</p>
            </div>
            <div class="feature_product1" id="feature_product3" >
                <img src="../images/pic110.png"/><br>
                <b>玩出色</b>
                <p>活力诠释最青春</p>
            </div>
            <div class="feature_product1" id="feature_product4">
                <img src="../images/pic110.png"/><br>
                <b>新复古</b>
                <p>活力诠释最青春</p>
            </div>
        </div>
    </div>
    <!--============团队展示============= -->
    <div class="team">
        <div class="line"></div>

        <h4>我们的团队</h4>
        <div class="line"></div>

        <span>创新源于我们的思想</span>
        <div class="teaminfo">
            <div class="teaminfo_person person1" id="person1"  onmouseover="change()" onmouseout="changeagin()">
                <img id="image" src="../images/about_person1.png"/>
                <div id="mengceng"></div>
                <div id="descript">
                    <p class="xiangming">戴维</p>
                    <p class="miaoshu">专业彩妆师，从事彩妆事业8年</p>
                </div>
            </div>
            <div class="teaminfo_person person2">
                <!--<img  src="../images/about_person2.png"/>-->
                <div class="grid">
                    <figure class="effect-layla">
                        <img src="../images/about_person2.png" alt="img25"/>
                        <figcaption>
                            <p><b>Dynamic</b><br>专业彩妆师，从事彩妆事业8年</p>
                            <a href="#">View more</a>
                        </figcaption>
                    </figure>
                </div>
            </div>
            <div class="teaminfo_person person3">
                <div class="grid">
                    <figure class="effect-jazz">
                        <img src="../images/about_person3.png" alt="img25"/>
                        <figcaption>
                            <p><b>Dynamic</b><br>专业彩妆师，从事彩妆事业8年</p>
                            <a href="#">View more</a>
                        </figcaption>
                    </figure>
                </div>
            </div>
            <div class="teaminfo_person person4">
                <div class="grid">
                    <figure class="effect-jazz">
                        <img src="../images/about_person4.png" alt="img25"/>
                        <figcaption>
                            <p><b>Dynamic</b><br>专业彩妆师，从事彩妆事业8年</p>
                            <a href="#">View more</a>
                        </figcaption>
                    </figure>
                </div>
            </div>
        </div>
    </div>
    <div id="allmap" style="width: 700px; height: 300px;margin: 20px auto"></div>
    <!-- =============iframe导入页脚=========-->
    <div class="footers">
        <iframe src="tetst.html" frameborder="0" width="100%" leftmargin="0"  topmargin="0" scrolling="no" ></iframe>
    </div>
</div>
<script type="text/javascript" src="../js/Aboutus.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=xD5MPhQwpHeE8VtCcCx9gWsf4B5nVDAC" type="text/javascript"></script>
<script type="text/javascript" src="../js/map.js"></script>
<script type="text/javascript">
    $(".main .year .list").each(function(e, target){
        var $target=  $(target),
                $ul = $target.find("ul");
        $target.height($ul.outerHeight()), $ul.css("position", "absolute");
    });
    $(".main .year>h2>a").click(function(e){
        e.preventDefault();
        $(this).parents(".year").toggleClass("close");
    });
</script>
</body>
</html>